<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="icon" th:href="@{/static/images/logo.ico}">
  <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/static/index/js/lay-module/step-lay/step.css}" media="all">
  <style>
    body {
      background-color: #ffffff;
    }
    .step-window{
      height: 100%;
      width: 560px;
      margin: 0 auto;
      overflow: auto;
    }
    .collapse-close{
      position: absolute;
      right: 10px;
      z-index: 99;
      line-height: 42px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="layuimini-container">
    <div class="layuimini-main">

      <div class="layui-fluid">
        <div class="layui-card">
          <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
              <div carousel-item>
                <!-- step 1 start -->
                <div>
                  <form class="layui-form" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                    <div class="layui-form-item">
                      <label class="layui-form-label">房间号：</label>
                      <div class="layui-input-block">
                        <div class="layui-col-md2">
                          <input type="text" class="layui-input layui-disabled" disabled
                                 required v-model="room.floor"/>
                        </div>
                        <div class="layui-col-md8">
                          <input type="text" class="layui-input layui-disabled" disabled
                                 required v-model="room.roomNum"/>
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">房间类型:</label>
                      <div class="layui-input-block">
                        <input type="text" class="layui-input layui-disabled" disabled required
                               v-model="room.roomTypeObj.type">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">单价：</label>
                      <div class="layui-input-block">
                        <input type="text" class="layui-input layui-disabled" disabled required
                               :value="room.roomTypeObj.price / 100.0">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-inline">

                        <div class="layui-inline" id="ID-laydate-rangeLinked">
                          <label class="layui-form-label">入住时间:</label>
                          <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="start_date" class="layui-input" lay-verify="required" required placeholder="开始日期" >
                          </div>
                          <div class="layui-form-mid">到</div>
                          <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="end_date" class="layui-input" lay-verify="required" required placeholder="结束日期">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formStep">
                          &emsp;下一步&emsp;
                        </button>
                      </div>
                    </div>
                  </form>
                </div>
                <!-- step 1 end -->
                <!-- step 2 start -->
                <div>
                  <div class="step-window">
                    <form class="layui-form"
                          style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                      <div id="info-container">
                        <div class="layui-collapse" style="position: relative" lay-accordion v-for="(item, index) in guests">
                          <span class="collapse-close" @click.prevent="removeInfo(index)" >X</span>
                          <div class="layui-colla-item">
                            <div class="layui-colla-title">入住人信息</div>
                            <div class="layui-colla-content layui-show">
                              <div class="layui-form-item">
                                <label class="layui-form-label">身份证</label>
                                <div class="layui-input-block">
                                  <button type="button" class="layui-btn" :id="'ID-upload-demo-btn' + index" :data-index="index">
                                    <i class="layui-icon layui-icon-upload"></i> 身份证上传
                                  </button>
                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">入住人姓名</label>
                                <div class="layui-input-block">
                                  <input type="text" placeholder="请填写入住人姓名"
                                         class="layui-input"
                                         name="name"
                                         v-model="guests[index].name"
                                         lay-verify="required|name" required/>

                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">入住人身份证号码：</label>
                                <div class="layui-input-block">
                                  <input type="text" placeholder="请填写入住人身份证号码"
                                         class="layui-input"
                                         name="idNumber"
                                         v-model="guests[index].idNumber"
                                         lay-verify="required|idcard" required/>

                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">入住人住址：</label>
                                <div class="layui-input-block">
                                  <input type="text" placeholder="请填写入住人住址"
                                         class="layui-input"
                                         name="address"
                                         v-model="guests[index].address"
                                         lay-verify="required|address" required/>

                                </div>
                              </div>
                              <div class="layui-form-item">
                                <label class="layui-form-label">入住人民族：</label>
                                <div class="layui-input-block">
                                  <input type="text" placeholder="请填写入住人民族"
                                         class="layui-input"
                                         name="nation"
                                         v-model="guests[index].nation"
                                         lay-verify="required|address" required/>

                                </div>
                              </div>
                              <div class="layui-form-item" pane>
                                <label class="layui-form-label">性别：</label>
                                <div class="layui-input-block">
                                  <select name="interest" lay-filter="demo-radio-filter" :data-id="index" v-model="guests[index].gender">
                                    <option>男</option>
                                    <option>女</option>
                                  </select>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="layui-form-item">
                        <div class="layui-input-block">
                          <button class="layui-btn" type="button" @click="addInfo()">
                            &emsp;添加入住人信息 &emsp;
                          </button>
                          <button class="layui-btn pre" type="button">
                            &emsp;上一步&emsp;
                          </button>
                          <button class="layui-btn" lay-submit lay-filter="formStep2">
                            &emsp;下一步&emsp;
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <!-- step 2 end -->
                <!-- step 3 start -->
                <div>
                  <form class="layui-form" style="margin: 0 auto;max-width: 560px;padding-top: 40px;">
                    <div class="layui-form-item">
                      <label class="layui-form-label">房间号:</label>
                      <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux" >{{room.floor}}</div>
                        <div class="layui-form-mid layui-word-aux">{{room.roomNum}}</div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">入住人数:</label>
                      <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux">{{guests.length}}
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">单价:</label>
                      <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux">{{room.roomTypeObj.price / 100.0}}
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">时间:</label>
                      <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux" >{{intakeInfo.startTime + ' 到 ' + intakeInfo.endTime + '(共计： '+ day + '天)'}}
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">总计金额:</label>
                      <div class="layui-input-block">
                        <div class="layui-form-mid layui-word-aux">
                          <span style="font-size: 18px;color: #333;" >{{room.roomTypeObj.price * day / 100.0}}元</span>
                        </div>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">押金:</label>
                      <div class="layui-input-block">
                        <input type="text" class="layui-input" lay-verify="required" required
                               name="deposit" />
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">预付款:</label>
                      <div class="layui-input-block">
                        <input type="text" class="layui-input" lay-verify="required" required
                               name="prepay" />
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-primary pre">上一步
                        </button>
                        <button class="layui-btn" lay-submit lay-filter="formStep3">
                          &emsp;确认&emsp;
                        </button>
                      </div>
                    </div>
                  </form>
                </div>
                <div>
                  <div style="text-align: center;margin-top: 90px;">
                    <i class="layui-icon layui-circle"
                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                      入住成功
                    </div>
                    <div style="font-size: 14px;color: #666;margin-top: 20px;">go go go</div>
                  </div>
                  <div style="text-align: center;margin-top: 50px;">
                    <button class="layui-btn layui-btn-primary" @click="closeFrame">关闭</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script th:src="@{/static/lib/juqery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/index/js/lay-config.js}" charset="utf-8"></script>
<script src="/static/lib/vue/vue.global.js"></script>
<script th:inline="javascript">
  let ctx = [[${#httpServletRequest.getContextPath()}]];
  let id = [[${id}]];
</script>

<script>
  let $, form, step, laydate, util;
  const options = {
    data() {
      return {
        room: {},  // 入住房间信息
        // roomType: '', // 入住房间类型
        day: 0, // 入住天数
        guests: [], // 入住人员信息
        intakeInfo: {
          roomId: id, // 入住房间id
          startTime: '', // 入住时间
          endTime: '', // 退房时间
          deposit: 0 // 押金
        }, // 入住信息
      }
    },
    methods: {
      // 获取房间信息
      getRoomInfo() {
        let _that = this;
        jQuery.get({
          async: false, // 同步

          url: ctx + '/room/get/' + _that.intakeInfo.roomId,
          success: res => {
            if (res.code == 200) {
              console.log(res.data)
              _that.room = res.data;
              _that.roomType = res.data.roomTypeObj.type;
            }
          }
        });
      }
      // 添加入住人员信息
      , addInfo() {
        let _that = this;
        this.guests.push({gender: '男'});

        var length = this.guests.length;

        setTimeout(() => {
          var uploadInst = layui.upload.render({
            elem: '#ID-upload-demo-btn' + (length - 1),
            url: ctx + '/idcard', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            before: function(obj){
              layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
              // console.log(this.elem[0])
              // 若上传失败
              if(res.code == 200){
                // 上传成功
                layer.msg('上传完毕', {icon: 1});
                console.log(res);

                // 设置值
                let result = res.data.words_result;
                _that.guests[length - 1].name = result['姓名'].words;
                _that.guests[length - 1].idNumber = result['公民身份号码'].words;
                _that.guests[length - 1].address = result['住址'].words;
                _that.guests[length - 1].nation = result['民族'].words;
                _that.guests[length - 1].gender = result['性别'].words;
                setTimeout(function(){
                  layui.form.render('select');
                }, 100);
              }
            }
          });
          layui.form.render('select');
          layui.element.render('collapse');
        }, 100);
      }

      , removeInfo(index) {
        // event.target.parentElement.remove()
        this.guests.splice(index, 1);
        setTimeout(() => {
          layui.form.render('select');
        }, 100);
      },
      closeFrame(){
        parent.layer.closeAll();
      }
    },
    created() {
      this.getRoomInfo();
    },
    mounted() {
      let _that = this;
      layui.use(['form', 'step', 'laydate', 'util', 'upload'], function () {
        $ = layui.$,
                form = layui.form,
                step = layui.step,
                laydate = layui.laydate,
                upload = layui.upload,
                util = layui.util;
        // 分步表单
        step.render({
          elem: '#stepForm',
          filter: 'stepForm',
          width: '100%', //设置容器宽度
          stepWidth: '750px',
          height: '500px',
          stepItems: [{
            title: '入住房间信息'
          }, {
            title: '入住人员信息'
          }, {
            title: '付款信息'
          }, {
            title: '完成'
          }]
        });

        // 日期范围
        laydate.render({
          elem: '#ID-laydate-rangeLinked',
          range: ['#start_date', '#end_date'],
          format: 'yyyy-MM-dd',
          rangeLinked: true,
          min: -0,
          max: 30,
          // value: util.toDateString(new Date(), 'yyyy-MM-dd') + " 到 " + util.toDateString(new Date(), 'yyyy-MM-dd'),
          calendar: true,
          btns: ['clear', 'now', 'confirm'],
          shortcuts: [
            {
              text: "这个月",
              value: function () {
                var value = [];
                var date1 = new Date();
                // date1.setMonth(date1.getMonth() - 1);
                date1.setDate(1);
                date1.setHours(0, 0, 0, 0);
                value.push(date1);
                var date2 = new Date();
                date2.setMonth(date2.getMonth() + 1);
                date2.setDate(1);
                date2.setHours(0, 0, 0, 0);
                date2 = date2.getTime() - 1;
                value.push(new Date(date2));
                return value;
              }()
            },
            {
              text: "下个月",
              value: function () {
                var value = [];
                var date1 = new Date();
                date1.setMonth(date1.getMonth() + 1);
                date1.setDate(1);
                date1.setHours(0, 0, 0, 0);
                value.push(date1);
                var date2 = new Date();
                date2.setMonth(date2.getMonth() + 2);
                date2.setDate(1);
                date2.setHours(0, 0, 0, 0);
                date2 = date2.getTime() - 1;
                value.push(new Date(date2));
                return value;
              }()
            }
          ],
          onConfirm(value, date, endDate) {
            console.log(value, date, endDate)
            _that.intakeInfo.startTime = value.split(" - ")[0];
            _that.intakeInfo.endTime =  value.split(" - ")[1];

            let days = 0;
            // 判断是否在同一个月
            if (date.month != endDate.month) {
              var endDate1 = laydate.getEndDate(date.month, date.year);
              days += endDate1 - date.date;
              days += endDate.date;
            } else {
              days = endDate.date - date.date;
            }
            _that.day = days;

          }
        });

        _that.addInfo();

        // var uploadInst = upload.render({
        //     elem: '.ID-upload-demo-btn',
        //     url: ctx + '/idcard', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        //     before: function(obj){
        //         layer.msg('上传中', {icon: 16, time: 0});
        //     },
        //     done: function(res){
        //         console.log(this)
        //         console.log(event)
        //         // 若上传失败
        //         if(res.code == 200){
        //             // 上传成功
        //             layer.msg('上传完毕', {icon: 1});
        //             console.log(res);
        //
        //             // 设置值
        //             let result = res.data.words_result;
        //             _that.guests[0].name = result['姓名'].words;
        //             _that.guests[0].idNumber = result['公民身份号码'].words;
        //             _that.guests[0].address = result['住址'].words;
        //             _that.guests[0].nation = result['民族'].words;
        //             _that.guests[0].gender = result['性别'].words;
        //         }
        //     }
        // });

        // 第一个单选框
        form.on('select(demo-radio-filter)', function(data){
          console.log("radio render")
          var elem = data.elem; // 获得 radio 原始 DOM 对象
          var value = elem.value; // 获得 radio 值
          // data-id
          _that.guests[elem.dataset.id].gender = value;
        });

        form.on('submit(formStep)', function (data) {
          step.next('#stepForm');
          return false;
        });

        form.on('submit(formStep2)', function (data) {
          step.next('#stepForm');
          return false;
        });

        form.on('submit(formStep3)', function (data) {
          _that.intakeInfo.deposit = data.field.deposit * 100;
          _that.intakeInfo.prepay = data.field.prepay * 100;
          // 保存入住信息
          jQuery.post({
            url: ctx + '/intakeInfo',
            data: JSON.stringify(_that.intakeInfo),
            contentType: 'application/json;charset=utf-8',
            success: res => {
              if (res.code == 200) {
                let id = res.data;
                // 保存入住人员信息
                _that.guests.forEach(item => {
                  item.intakeId = id;
                });

                jQuery.post({
                  url: ctx + '/guests',
                  data: JSON.stringify(_that.guests),
                  contentType: 'application/json;charset=utf-8',
                  success: res => {
                    if (res.code == 200) {
                      step.next('#stepForm');
                    } else {
                      layer.msg(res.msg);
                    }
                  }
                });
                // setTimeout(() => {
                //     window.location.href = ctx + '/intake/list';
                // }, 1000);
              } else {
                layer.msg(res.msg);
              }
            }
          });

          return false;
        });

        $('.pre').click(function () {
          step.pre('#stepForm');
        });

        $('.next').click(function () {
          step.next('#stepForm');
        });
      })
    }
  };
  const app = Vue.createApp(options);
  const vm = app.mount('#app');
</script>
</body>
</html>